<template>
  <uni-popup ref="actionSheet" :mask-click="false" type="bottom">
    <view class="bottomPop">
      <view class="bottomPop_content">
        <view
          class="bottomPop_item"
          @click="handleClick(index,item)"
          v-for="(item, index) in opt.itemList"
          :key="index"
        >
          {{ item.name }}
        </view>
      </view>

      <view class="cancle flex" @click="close">取消</view>
    </view>
  </uni-popup>
</template>

<script>
export default {
	data() {
		return {
			opt:{
				itemList:[],
				success:null
			}
		};
	},
	methods: {
		showActionSheet(opt) {
			this.opt = opt;
			this.$refs.actionSheet.open();
		},
		close() {
			this.$refs.actionSheet.close();
		},
		handleClick(index,val) {
			this.opt.success({tapIndex:index,val});
			this.close();
		},
	},
};
</script>

<style lang="scss" scoped>
.bottomPop {
  background-color: #f2f2f2;
  border-radius: 24rpx 24rpx 0rpx 0rpx;
  .bottomPop_content {
    margin-bottom: 16rpx;

    .bottomPop_item {
      height: 112rpx;
      background: #ffffff;
      border-radius: 24rpx 24rpx 0rpx 0rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);
      font-size: 28rpx;
    }

    :nth-last-child(1) {
      border-bottom: none;
    }
  }

  .cancle {
    height: 108rpx;
    background: #ffffff;
  }
}
</style>
